<template>
  <div class="content">
    <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="center">
      <van-cell-group inset>
        <van-cell :title="title">
          <template #right-icon>
            <van-image width="2rem" height="2rem" round fit="cover" :src="avatar" @click="show = !show" />
          </template>
        </van-cell>
        <van-cell title="性别" :value="sex">
        </van-cell>
        <van-cell title="邮箱" :value="email">
        </van-cell>
        <van-cell title="当前角色" :value="role" @click="changeRole" class="role">
          <template #right-icon>
            <van-switch v-model="checked" active-color="#ee0a24" inactive-color="#1989fa" :disabled="isDisable" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <input type="file" class="sr-only" accept="image/png,image/jpeg,image/jpg"
      @change="uploadImage(($event.target as any).files)" v-show="show" />
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'
const request = require('@/network/request').default;
import { uploadFile } from "@/utils/upload";
import { useRouter } from 'vue-router'
import bus from 'vue3-eventbus'
import { useStore } from 'vuex'
import { ImgUrl } from '@/constant';


export default {
  name: 'Personal',
  props: [],
  setup(props, context) {
    const onClickLeft = () => history.back();
    const router = useRouter();
    const store = useStore()
    const userInfo = ref({
      avatar: '',
      nickname: '',
      phone: '',
      sex: 1,
      type: 0,
    })
    const checked = ref(false)
    const isDisable = ref(false)
    const changeRole = () => {
      if (!isDisable.value) {
        let info = JSON.parse(localStorage.getItem('userInfo'))
        if (role.value == '顾客') {
          role.value = '商家'
          info.type = 0
          router.push('/handleorders')
        } else {
          role.value = '顾客'
          info.type = 1
          router.push('/user')
        }
        bus.emit('isShop', { isShop: info.type == 0 ? true : false })
        localStorage.setItem('userInfo', JSON.stringify(info))
      }
    }
    onMounted(() => {
      userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
      if (userInfo.value) {
        title.value = userInfo.value.phone
        if (userInfo.value.sex == 2)
          sex.value = '保密'
        else
          sex.value = userInfo.value.sex == 1 ? '男' : '女'
        email.value = userInfo.value.nickname
        role.value = userInfo.value.type == 1 ? '顾客' : '商家'
        avatar.value = userInfo.value.avatar
        checked.value = userInfo.value.type == 0 ? true : false
      }
      let shop = {
        suid: JSON.parse(localStorage.getItem('userInfo')).uid
      }
      request.post('/getcodebyuid', shop).then(res => {
        if (res.code == -1) {
          // console.log(res)
          isDisable.value = true
        } else if (res.code == 0) {
          // console.log(res)
          // sixcode.value = res.data
          // store.commit('setSixCode', res.data)
          // console.log(store.getters['getSixCode'])
        }
      })
    })
    const title = ref('')
    const sex = ref('')
    const email = ref('')
    const role = ref('')
    const avatar = ref('')
    const link = ref('')
    const show = ref(false)
    function uploadImage(files: Array<File>) {
      console.log(files)
      if (files.length > 0) {
        uploadFile(files[0]).subscribe({
          next: (result) => {
            console.log(result)
          },
          error: (err) => {
            console.log(err)
          },
          complete: (e) => {
            link.value = ImgUrl + e.key
            console.log(link.value)
            let user = {
              nickname: email.value,
              avatar: link.value,
            }
            request.post('/upAvatar', user).then(res => {
              console.log(res)
              if (res.code == -1) {
              } else if (res.code == 0) {
                let user1 = {
                  nickname: email.value
                }
                request.post('/getuser', user1).then(res => {
                  console.log(res)
                  res.data.password = ''
                  if (res.code == -1) {
                  } else if (res.code == 0) {
                    localStorage.setItem('userInfo', JSON.stringify(res.data))
                    avatar.value = res.data.avatar
                    show.value = false
                  }
                })
              }
            })
          },
        });
      }
    }
    return {
      onClickLeft,
      title,
      sex,
      email,
      role,
      uploadImage,
      show,
      avatar,
      changeRole,
      checked,
      isDisable
    };
  },
}
</script>

<style scoped lang="scss">
.content {
  height: 100vh;
  background-color: rgb(240, 236, 236);

  .center {
    width: 23rem;
    position: relative;
    top: 0.6rem;
    margin: 0 auto;

    .role {
      display: flex;
      align-items: center;
    }
  }

  .sr-only {
    display: inline-block;
    position: absolute;
    right: 1rem;
    top: 18rem;
    width: 5rem;
  }
}
</style>